
<script setup lang="ts">
import { ref, onMounted, computed, defineExpose } from 'vue';
import { ArrowRightBold } from '@element-plus/icons-vue';
import { KeyValues, TableCellBtn } from '../../utils/types';
import { UiCellBtns, conditions } from '../../utils';

const cls = 'page-rule-add-tree-transfer'

const props = defineProps<{
  jsonData: KeyValues[]
}>()
const propsData = { multiple: true }
const slectData = ref([])
const form =ref<KeyValues[]>([])

const setForm = ( v: any )=>{
  form.value = v.map( _ =>{
    const str =  _.join('.')
    let obj = form.value.find( item => {
        return item.ruleKey === str
    })
    return obj? { ...obj } :{ ruleKey:  str}
  })
}

const removeItem = (row: any, index: number) => {
  form.value.splice( index, 1)
  const arr = slectData.value.map(_ => _.join('.'))
  const i = arr.indexOf(row.ruleKey)
  slectData.value = [
    ...slectData.value.slice(0, i),
    ...slectData.value.slice(i + 1)
  ]
}

const getBtns = (row: any , index: number) => {
  return [
    { label: '删除', onClick: removeItem.bind(null, row, index) }
  ] as TableCellBtn[]
}
defineExpose({
  getForm: () => form.value
})
</script>
<template>
  <div :class="`${cls}`">
    <!-- 左边 -->
    <div :class="`${cls}_left`">
      <div :class="`${cls}_head`">API出参</div>
      <div :class="`${cls}_left_list`">
        <ElCascader :options="props.jsonData" :props="propsData" v-model="slectData" clearable  @change = "setForm"/>
      </div>
    </div>
    <!-- 中间按钮 -->
    <div :class="`${cls}_btn`">
        <ElButton :icon="ArrowRightBold" />
    </div>
    <!-- 右边 -->
    <div :class="`${cls}_right`">
      <div class="list">
        <ElTable :data="form" row-key="_k" default-expand-all>
          <ElTableColumn label="已选数据" min-width="180">
            <template v-slot="{ row }">
              <ElInput v-model="row.ruleKey" disabled />
            </template>
          </ElTableColumn>
          <ElTableColumn label="条件" min-width="70">
            <template v-slot="{ row }">
              <ElSelect v-model="row.condition">
                <ElOption v-for="_ in conditions" :key="_" :value="_" :label="_"/>
              </ElSelect>
            </template>
          </ElTableColumn>
          <ElTableColumn label="数值" min-width="120">
            <template v-slot="{ row }">
              <ElInput v-model ="row.paramRule" placeholder="请输入" />
            </template>
          </ElTableColumn>

          <ElTableColumn label="操作" width="60" fixed="right">
            <template v-slot="{ row, $index }">
              <UiCellBtns :btns="getBtns(row, $index)" />
            </template>
          </ElTableColumn>
        </ElTable>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.page-rule-add-tree-transfer {
  display: flex;
  width: 100%;
  border: 1px solid var(--el-border-color);
  justify-content: space-around;
  padding: 6px 0px;
 &_left{
  border: 1px solid var(--el-border-color);
  width: 30%;
  &_list{
    padding: 10px;
  }
 }
 &_right{
  border: 1px solid var(--el-border-color);
  width: 60%;
 }
 &_head{
  background-color: rgb(247, 248, 250);
  padding: 0px 5px;
  border: 1px solid var(--el-border-color-lighter);
  color: var(--el-text-color-secondary);
  font-size: 14px;
  font-weight: 600;
 }
 &_btn{
  align-self: center;
 }
}
</style>
